<template lang="pug">
    el-card(shadow="never")
      div(slot="header",class="clearfix")
          span 新增胰岛素泵型号

      el-form(:model="newInsulinModel",ref="newInsulinModelForm")
        el-form-item(prop="pumpBrandId",:rules="[{required:true, message: '胰岛素泵品牌不能为空'}]")
            el-select(placeholder="胰岛素泵品牌",
                        v-model="newInsulinModel.pumpBrandId",
                        @change="brandChange",
                        clearable)
                            el-option(v-for="brand in brands",:label="brand.name",:value="brand.value",:key="brand.value")
            i(class="el-icon-loading",v-if="selectionQuerying")

        el-form-item(prop="name",:rules="[{required:true, message: '胰岛素泵型号不能为空'}]")
          el-input(placeholder="胰岛素泵型号",v-model="newInsulinModel.name",type="text",@change="submit")
      div(class="card-footer")
          div(class="pull-right")
              el-button(size="small",@click="resetForm('newInsulinModelForm')")
                span 重置
              submit-button(@click="submit" :loading="submiting")
                i(class="el-icon-check")
                span 新建

</template>

<script>
import Vue from "vue";
import { AwesomePagination } from "awesome-element-ui";
Vue.use(AwesomePagination);

import axios from "@/plugin/axios";

import PumpModelNewModel from './PumpModelNewModel';
import BaseNew from '@/mixins/BaseNew';

export default {
  name: "pump-model-create",
  mixins:[BaseNew],
  data() {
    return {
      newInsulinModel: new PumpModelNewModel(),
      brands:[],
      selectionQuerying: false, // 获取胰岛素泵品牌选项数据状态
    };
  },

  methods: {
    /**获取胰岛素泵品牌选项数据 */
    getSelection(){
        this.selectionQuerying = true;
        axios({method: 'post', url: '/PumpBrand/selection'})
        .then(brands=> this.getSelectionSuccess(brands))
        .catch(()=> this.selectionQuerying=false)
    },
    getSelectionSuccess(brands){
        this.selectionQuerying = false;
        this.brands = brands;
    },
   submit(){
     this.$refs.newInsulinModelForm.validate(valid => {
       if(valid) this.doSubmit();
     })
   },
   doSubmit(){
     if(this.submiting) return; // 防止重复提交
     axios({method: 'post', url: '/PumpModel/Create', data:{model: this.newInsulinModel}})
     .then(data=>this.submitSuccess(data))
     .catch(() => (this.submiting = false))
   },
   submitSuccess(data){
     this.submiting = false;
     this.showNewSuccess();
     this.resetForm('newInsulinModelForm');
     this.$emit('success'); // 提交事件
   },
   brandChange(){

   }
  },
  created() {
      this.getSelection();
  }
};
</script>
